<template>
  <div class="pieChart" ref="myDivRef"></div>
</template>

<script>
var echarts = require('echarts/lib/echarts') // 引入echarts主模块
require('echarts/lib/chart/pie') // 引入饼状图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/legend')
export default {
  mounted() {
    const myChart = echarts.init(this.$refs.myDivRef)
    myChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      color: ['#2ec7c9', '#b6a2de', '#5ab1ef', '#ffb980', '#d87a80'],
      series: [
        {
          name: '面积模式',
          type: 'pie',
          radius: ['15%', '50%'],
          center: ['50%', '50%'],
          roseType: 'radius',
          data: [
            { value: 320, name: '前端' },
            { value: 240, name: 'java' },
            { value: 149, name: 'pyth...' },
            { value: 100, name: 'C++' },
            { value: 59, name: 'UI' }
          ]
        }
      ]
    })
  }
}
</script>
<style lang="scss" scoped>
.pieChart {
  width: 253px;
  height: 160px;
}
</style>
